<template>
    <div>
        <div id="pdfDom" class="border-box" style="--border-label: '导出PDF内容';">
            <!-- 这里是要导出为PDF的内容 -->
            <h1 style="display:flex;justify-content: center;">这是要导出为PDF的内容</h1>
            <span style="display: flex;justify-content: center;">
                <el-button @click="getPdfByNoPage()">导出为不分页PDF</el-button>
                <el-button @click="getPdfByPage()">导出为分页PDF</el-button>
            </span>
            <div style="display: flex;" border>
                <div style="width: 50%;height: 200px;margin-top: 5%;">
                    <span style="color:aliceblue;margin:38%;">男生占比</span>
                    <div class="echart" id="maleLiqiud" :style="{ width: '100%', height: '180px' }"></div>
                </div>
                <div style="width: 50%;height: 200px;margin-top: 5%;">
                    <span style="color:aliceblue;margin:38%;">女生占比</span>
                    <div class="echart" id="femaleLiqiud" :style="{ width: '100%', height: '180px' }"></div>
                </div>
            </div>
            <div style="display: block;margin-left: 5%;">
                <div class="echart" id="stageChart" style="width: 95%;height: 240px;"></div>
            </div>
        </div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import "echarts-liquidfill";

export default {
    mounted() {
        setTimeout(() => {
            this.init();
        }, 50);
    },
    methods: {
        // 初始化图表
        init() {
            this.initMaleChart();
            this.initFemaleChart();
            this.initStageChart();
        },
        initMaleChart() {
            // 数值变化
            var value = 60;
            let option = {
                // backgroundColor: "#000", //背景色
                title: {
                    text: value + "%",
                    textStyle: {
                        fontSize: 20,
                        fontFamily: "Microsoft Yahei",
                        fontWeight: "normal",
                        color: "#fff",
                    },
                    x: "center",
                    y: "48%",
                },
                series: [
                    {
                        type: "liquidFill", //配置echarts图类型
                        radius: "60%",
                        center: ["50%", "50%"],
                        //  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
                        data: [0.5, 0.5],  //设置波浪的值
                        waveAnimation: false, //静止的波浪
                        amplitude: 0,
                        backgroundStyle: {
                            borderWidth: 1,
                            color: "transparent",//水球图内部背景色
                        },
                        outline: {
                            borderDistance: 10,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: "#5acef2",
                            },
                        },
                        color: [ //波浪颜色
                            {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: "rgba(6, 187, 112, 0.3)", //下
                                    },
                                    {
                                        offset: 0,
                                        color: "rgba(11, 201, 199, 0.3)",
                                    },
                                ],
                                globalCoord: false,
                            },
                            {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: "rgba(6, 187, 112, 1)", //下
                                    },
                                    {
                                        offset: 0,
                                        color: "rgba(11, 201, 199, 1)",
                                    },
                                ],
                                globalCoord: false,
                            },
                        ],
                        label: {
                            normal: {
                                formatter: "",
                            },
                        },
                    },

                ],
            };
            const myLiuqiud = echarts.init(document.getElementById("maleLiqiud"));
            myLiuqiud.setOption(option);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myLiuqiud.resize();
            });
        },
        initFemaleChart() {
            // 数值变化
            var value = 60;
            let option = {
                // backgroundColor: "#000", //背景色
                title: {
                    text: value + "%",
                    textStyle: {
                        fontSize: 20,
                        fontFamily: "Microsoft Yahei",
                        fontWeight: "normal",
                        color: "#fff",
                    },
                    x: "center",
                    y: "48%",
                },
                series: [
                    {
                        type: "liquidFill", //配置echarts图类型
                        radius: "60%",
                        center: ["50%", "50%"],
                        //  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
                        data: [0.5, 0.5],  //设置波浪的值
                        waveAnimation: false, //静止的波浪
                        amplitude: 0,
                        backgroundStyle: {
                            borderWidth: 1,
                            color: "transparent",//水球图内部背景色
                        },
                        outline: {
                            borderDistance: 10,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: "#5acef2",
                            },
                        },
                        color: [ //波浪颜色
                            {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: "rgba(6, 187, 112, 0.3)", //下
                                    },
                                    {
                                        offset: 0,
                                        color: "rgba(11, 201, 199, 0.3)",
                                    },
                                ],
                                globalCoord: false,
                            },
                            {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: "rgba(6, 187, 112, 1)", //下
                                    },
                                    {
                                        offset: 0,
                                        color: "rgba(11, 201, 199, 1)",
                                    },
                                ],
                                globalCoord: false,
                            },
                        ],
                        label: {
                            normal: {
                                formatter: "",
                            },
                        },
                    },

                ],
            };
            const myLiuqiud = echarts.init(document.getElementById("femaleLiqiud"));
            myLiuqiud.setOption(option);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myLiuqiud.resize();
            });
        },
        initStageChart() {
            const option = {
                title: {
                    text: '测评阶段分布',
                    left: 'left',
                    top: 10,
                    textStyle: {
                        color: '#fff',
                    }
                },
                legend: {
                    right: 'right',
                    top: 'bottom',
                    textStyle: {
                        color: '#fff',
                    }
                },
                tooltip: {
                    trigger: 'item',
                },
                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 335, name: '重度', itemStyle: { color: '#EF3333' } },
                            { value: 310, name: '中度', itemStyle: { color: '#E6A23C' } },
                            { value: 274, name: '轻度', itemStyle: { color: '#409EFF' } },
                            { value: 235, name: '正常', itemStyle: { color: '#67C23A' } }
                        ].sort(function (a, b) {
                            return a.value - b.value;
                        }),
                        roseType: 'radius',
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)',
                            show: false
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };
            const stageChart = echarts.init(document.getElementById("stageChart"));
            stageChart.setOption(option);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                stageChart.resize();
            });
        },
    },
};
</script>
  